<template>
	<div class="right-box">
		<Breadcrumb style="margin-bottom: 5px;">
	        <BreadcrumbItem>
	            <Icon type="ios-paper" color="red" size="18"></Icon> 个人中心
	        </BreadcrumbItem>
	        <BreadcrumbItem>
	            个人资料
	        </BreadcrumbItem>
	  	</Breadcrumb>
	  	<div class="card-Box">
	  		<Card :bordered="false" dis-hover>
	            <p slot="title">{{user.nickName}}</p> 
	            <a href="#" slot="extra" @click="editPSW">
		            <Icon type="ios-loop-strong"></Icon>
		            修改密码
		        </a>
	             <a href="#" slot="extra" @click="editInfo">
		            <Icon type="ios-loop-strong"></Icon>
		            修改信息
		        </a>
	            <p>系统角色：{{user.userType | userType}}</p>
	            <p>系统编号：{{user.userCode}}</p>
	            <p>所属部门：{{user.userDuties}}</p>
	            <p>年龄：{{user.age}}</p>
	            <p>性别：{{user.sex}}</p>
	            <p>地址：{{user.address}}</p>
	            <p>创建日期：{{user.createTime}}</p>
	        </Card>
	  	</div>
	  	<Modal
        title="请填写修改内容"
        v-model="modelPsd"
        :closable="false" @on-ok="checkSure"  @on-cancel="handleReset('formValidate')">
	        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
		        <FormItem label="旧密码" prop="oldpsd">
		            <Input v-model="formValidate.oldpsd" placeholder="请输入旧密码"></Input>
		        </FormItem>
		        <FormItem label="新密码" prop="newpsd">
		            <Input v-model="formValidate.newpsd" placeholder="请输入新密码"></Input>
		        </FormItem>
		    </Form>
	    </Modal>
	  	<Modal
        title="请填写修改内容"
        v-model="modelShow"
        :closable="false" @on-ok="checkSure1"  @on-cancel="handleReset('formValidate1')">
	        <Form ref="formValidate1" :model="formValidate1" :rules="ruleValidate1" :label-width="80">
		        <FormItem label="地址" prop="address">
		            <Input v-model="formValidate1.address" placeholder="请输入地址"></Input>
		        </FormItem>
		        <FormItem label="性别" prop="sex">
		            <Input v-model="formValidate1.sex" placeholder="请输入性别"></Input>
		        </FormItem>
		        <FormItem label="年龄" prop="age">
		            <Input v-model="formValidate1.age" placeholder="请输入年龄"></Input>
		        </FormItem>
		    </Form>
	    </Modal>
	</div>
</template>

<script>
	export default{
		name:'userInfo',
		data(){
			return{
				user:{
					nickName:'',
					sex:'',
					userDuties:'',//职位
					userCode:'',
					age:'',
					address:'',
					username:'',
					password:'',
					userId:'',
					departmentId:'',
					createTime:''
				},
				modelPsd:false,//弹窗 修改密码 默认隐藏
				modelShow:false,//弹窗 修改信息 默认隐藏
				formValidate: {
                    oldpsd:'',
                    newpsd:''
                },
                ruleValidate: {//表单校验规则
                    oldpsd: [
                        { required: true, message: '旧密码不能为空', trigger: 'blur' }
                    ],
                    newpsd: [
                        { required: true, message: '新密码不能为空', trigger: 'blur' }
                    ]
                },
                formValidate1: {
                    address:'',
                    sex:'',
                    age:''
                },
                ruleValidate1: {//表单校验规则
                    address: [
                        { required: true, message: '地址不能为空', trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '性别不能为空', trigger: 'blur' }
                    ],
                    age: [
                        { required: true, message: '年龄不能为空', trigger: 'blur' }
                    ]
                }
			}
		},
		filters:{
			userType(value){
				let a= ''
				if(value == 0){a="超级管理员"}
				if(value == 1){a="部门管理员"}
				if(value == 2){a="普通用户"}
				return a
			}
		},
		methods:{
			editPSW(){
				this.modelPsd = true
			},
			editInfo(){
				this.modelShow = true
			},
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            handleSubmit(name) {//验证表单
            	console.log(name)
               this.$refs[name].validate((valid) => {
                    if (valid) {//验证通过
                    	if(name=='formValidate'){
                    		this.submitPSW()
                    	}else{
                    		this.submitInfo()
                    	}
                    } else {//验证不通过
                        this.$Message.error('请按要求完善表单!');
                        if(name=='formValidate'){
                        	this.handleReset('formValidate')
                    	}else{
                        	this.handleReset('formValidate1')
                    	}
                    }
                })
            },
			checkSure(){//点击弹窗确定 验证表单
				this.handleSubmit('formValidate')
			},
			checkSure1(){//点击弹窗确定 验证表单
				this.handleSubmit('formValidate1')
			},
			submitInfo(){//提交修改信息
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/modifyUser',
	    			data:{
	    				userId:that.LS.getLS('userId'),
	    				address:that.formValidate1.address,
	    				sex:that.formValidate1.sex,
	    				age:that.formValidate1.age
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code==200){
                    	this.$Message.success(res.data.msg);
                    	this.getInfo()
	    				return
	    			}
                    this.$Message.error(res.data.msg);
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			},
			submitPSW(){//提交修改密码
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/modifyUserPassword',
	    			data:{
	    				userId:that.LS.getLS('userId'),
	    				oldPassword:that.formValidate.oldpsd,
	    				newPassword:that.formValidate.newpsd
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			if(res.data.code==200){
                    	this.$Message.success(res.data.msg);
	    				return
	    			}
                    this.$Message.error(res.data.msg);
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			},
			getInfo(){
				let that = this
				this.$axios({
	    			method:'post',
	    			url:that.GLOBAL.url+'/sys/getUserInfo',
	    			data:{
	    				userId:that.LS.getLS('userId'),
	    			},
	    			transformRequest:[function(data){
	    				let ret = ''
	    				for(let it in data){
	    					ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
	    				}
	    				return ret
	    			}],
	    			xhrFields:{
	    				widthCredentials:true
	    			},
	    			crossDomain:true,
	    			header:{
	    				'Content-Type': 'application/x-www-form-urlencoded'
	    			}
	    		}).then(res=>{
	    			console.log(res)
	    			this.user = res.data
	    		}).catch(function(err){
	    			console.log(err)
	    		})
			}
		},
		created(){
			this.getInfo()
		}
	}
</script>

<style scoped>
.right-box{
	width: 100%;
	height: 100%;
	position: relative;
}
.addBtn{
	position: absolute;
	top: -10px;
	right: 20px;
}
.card-Box{
	width: 55%;
	position: absolute;
	top: 36%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	border: 1px solid #D3D3D3;
	border-radius: 5px;
	box-sizing: border-box;
	padding: 20px;
}
.card-Box p{
	margin-top: 10px;
}
</style>